body { 
    display: grid;
    /* 设置背景图片 */
    background-image: url(../img/dengbeijin.jpg);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    background-size:cover;
    background-attachment:fixed;
    
    grid-template-areas: 
      "header header header"
      "nav article ads"
      "nav footer footer";
    grid-template-rows: 80px 1fr 70px;  
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    
    }
    
  header, footer, article, nav, div {
    padding: 1.2em;
    }
  #pageHeader {
    grid-area: header;
    }
  #pageFooter {
    grid-area: footer;
    }
  #mainArticle { 
    grid-area: article;      
    }
  #mainNav { 
    grid-area: nav; 
    }
  #siteAds { 
    grid-area: ads; 
    } 
  /* Stack the layout on small devices/viewports. */
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "article"
        "ads"
        "nav"
        "footer";
      grid-template-rows: 80px 1fr 70px 1fr 70px;  
      grid-template-columns: 1fr;
   }
  }

  /* 下拉菜单 */
  div.changeDiv input {
    font-size: 1em;
    font-family: 仿宋, serif;
    width: 60%;
    display: block;
    margin-left: 10%;
    opacity: 0.8;
    padding: 0.2em;
    color: #000000;
    border-radius: 10px;
    background-color: #bed8df;
}

  